<template>
  <div class="list-wrapper clearfix" v-if="isImgTable">
    <div class="list-item" v-for="item in list" :key="item" @click="goToDetail">
      <div class="item">
        <div class="photo">
          <img class="img" src="@/assets/img/lian.png" />
        </div>
        <div class="content">
          <span class="iconfont icon-xingxing115x"></span>
          <h1>
            {{ item.title }}
          </h1>
          <h4>服务: {{ item.date }}</h4>
          <el-tag type="warning">{{ item.warn }}</el-tag>
          <el-tag>{{ item.normal }}</el-tag>
          <el-tag type="danger">{{ item.danger }}</el-tag>
        </div>
      </div>
    </div>
  </div>
  <div class="itemTable" v-else>
    <el-table :data="list" style="width: 100%" empty-text="暂无数据">
      <el-table-column fit="false" prop="date" label="企业名称">
      </el-table-column>
      <el-table-column fit="true" prop="name" label="服务时间">
      </el-table-column>
      <el-table-column fit="true" prop="province" label="账号类型">
      </el-table-column>
      <el-table-column fit="true" prop="city" label="客户类型">
      </el-table-column>
      <el-table-column fit="true" prop="address" label="使用状态">
      </el-table-column>
      <el-table-column fit="true" label="操作">
        <template #default="scope">
          <el-button @click="collectAccount(scope.row)" type="text" size="small"
            >收藏</el-button
          >
          <el-button type="text" size="small">取消收藏</el-button>
          <el-button type="text" size="small">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
type TableData = object[];
export default defineComponent({
  props: {
    list: {
      type: Array as any,
      default: (): TableData => [],
    },
    isImgTable: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    collectAccount(val: object) {},
    goToDetail(val: object) {},
  },
});
</script>
<style lang="scss" scoped>
.list-item {
  width: 33.33%;
  float: left;
  padding-right: 40px;
  box-sizing: border-box;
  margin-bottom: 20px;
  .item {
    border: 1px solid #f0f0f0;
    border-radius: 5px;
    display: flex;
    .content {
      width: 50%;
      height: 40%;
    }
    .photo {
      width: 43%;
      height: 60%;
      margin-top: 15px;
      margin-right: 15px;
    }
  }
}
</style>
